<template>
  <div id="leftNav">
    <div class="container">
      <div class="body">
        <div class="nav">
          <div class="title">
<!--            <svg t="1618142259684" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2236" width="32" height="32"><path d="M846.506667 213.333333H177.493333a6.826667 6.826667 0 0 0-6.826666 6.826667v54.272c0 3.712 3.072 6.784 6.826666 6.784h669.013334a6.826667 6.826667 0 0 0 6.826666-6.826667V220.16A6.826667 6.826667 0 0 0 846.506667 213.333333z m0 529.493334H177.493333a6.826667 6.826667 0 0 0-6.826666 6.741333v54.314667c0 3.712 3.072 6.784 6.826666 6.784h669.013334a6.826667 6.826667 0 0 0 6.826666-6.826667v-54.272a6.826667 6.826667 0 0 0-6.826666-6.784z m0-264.789334H177.493333a6.826667 6.826667 0 0 0-6.826666 6.826667v54.272c0 3.754667 3.072 6.826667 6.826666 6.826667h669.013334a6.826667 6.826667 0 0 0 6.826666-6.826667v-54.272a6.826667 6.826667 0 0 0-6.826666-6.826667z" p-id="2237" fill="#0B1C48"></path></svg>-->
            <div class="icon">
              <div class="ring1"></div>
              <div class="ring2"></div>
              <div class="ring3"></div>
            </div>
            加密工具
          </div>
          <button v-for="item in urlList"
                  :class="curNav===item.path?'active':''"
                  @click="navClick(item.path)"
          >
            {{ item.name }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LeftNav",
  data() {
    return {
      urlList: [
        {
          name: 'DES',
          path: '/des',
        },
        {
          name: 'AES',
          path: '/aes',
        },
        {
          name: 'SM4',
          path: '/sm4',
        }
      ],
      curNav: null,
    }
  },
  mounted() {
    let currentUrl = this.$route.path;
    this.curNav = currentUrl;
  },
  methods: {
    navClick: function (path) {
      this.$router.push(path);
      this.curNav = path;
    }
  }
}
</script>

<style scoped>
button {
  text-decoration: none;
  color: rgb(194,194,194);
  background-color: rgb(250, 250, 250);
  font-size: 20px;
  width: 100%;
  height: 6vh;
  outline: none;
  border: 0;
  border-left: rgb(250, 250, 250) solid 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 3px 0;
}
button:hover {
  border-left: #6A75CA solid 2px;
  color: #6A75CA;
}
.active {
  border-left: #6A75CA solid 2px;
  color: #6A75CA;
}
.container {
  height: 100vh;
  width: 12vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.body {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.nav {
  height: 100%;
  width: 100%;
  background-color: rgb(250, 250, 250);
  padding-top: 30px;
}
.title {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 23px;
  color: #6A75CA;
  margin-bottom: 6vh;
}
.icon {
  width: 70px;
  height: 75px;
  position: relative;
}
.icon .ring1 {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background-color: rgb(106,117,202);
  position: absolute;
  left: 5px;
  top: 5px;
  z-index: 1;
}
.icon .ring2 {
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: rgb(227,234,255);
  position: absolute;
  left: 28px;
  top: 5px;
  z-index: 2;
}
.icon .ring3 {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  background-color: rgb(158,167,216);
  position: absolute;
  left: 22px;
  top: 30px;
  z-index: 0;
}
</style>
